<div class="pull-right">
   <p class="m0">
      <small class="mr">Single column</small>
      <label class="switch pull-right">
         <input type="checkbox" checked="checked" ng-model="timelineAlt" />
         <span></span>
      </label>
   </p>
</div>
<h3>Timeline</h3>
<!-- START timeline-->
<ul ng-class="timelineAlt ? 'timeline-alt' : 'timeline'" ng-init="timelineAlt=false">
   <li data-datetime="Now" class="timeline-separator"></li>
   <!-- START timeline item-->
   <li>
      <div class="timeline-badge primary">
         <em class="fa fa-users"></em>
      </div>
      <div class="timeline-panel">
         <div ng-class="timelineAlt ? 'right' : 'left'" class="popover">
            <h4 class="popover-title">Client Meeting</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Av 123 St - Floor 2
                  <br/>
                  <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
               </p>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline item-->
   <li class="timeline-inverted">
      <div class="timeline-badge warning">
         <em class="fa fa-phone"></em>
      </div>
      <div class="timeline-panel">
         <div class="popover right">
            <h4 class="popover-title">Call</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Michael <a href="tel:+011654524578">(+011) 6545 24578 ext. 132</a>
                  <br/>
                  <small>Pellentesque ut diam velit, eget porttitor risus. Nullam posuere euismod volutpat.</small>
               </p>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline separator-->
   <li data-datetime="Yesterday" class="timeline-separator"></li>
   <!-- END timeline separator-->
   <!-- START timeline item-->
   <li>
      <div class="timeline-badge danger">
         <em class="fa fa-video-camera"></em>
      </div>
      <div class="timeline-panel">
         <div ng-class="timelineAlt ? 'right' : 'left'" class="popover">
            <h4 class="popover-title">Conference</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Join development group</p>
               <small>
                  <a href="skype:echo123?call">
                     <em class="fa fa-phone"></em>Call the Skype Echo</a>
               </small>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline item-->
   <li class="timeline-inverted">
      <div class="timeline-panel">
         <div class="popover right">
            <h4 class="popover-title">Appointment</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>
               <div class="btn-group">
                  <a href="#" data-toggle="dropdown" data-play="fadeIn" class="dropdown-toggle">
                     <em class="fa fa-paperclip"></em>
                  </a>
                  <ul class="dropdown-menu text-left">
                     <li>
                        <a href="#">
                           <em class="fa fa-download"></em>Download</a>
                     </li>
                     <li>
                        <a href="#">
                           <em class="fa fa-share"></em>Send to</a>
                     </li>
                     <li class="divider"></li>
                     <li>
                        <a href="#">
                           <em class="fa fa-times"></em>Delete</a>
                     </li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline item-->
   <li>
      <div class="timeline-badge info">
         <em class="fa fa-plane"></em>
      </div>
      <div class="timeline-panel">
         <div ng-class="timelineAlt ? 'right' : 'left'" class="popover">
            <h4 class="popover-title">Fly</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline item-->
   <li>
      <div class="timeline-panel">
         <div ng-class="timelineAlt ? 'right' : 'left'" class="popover">
            <h4 class="popover-title">Appointment</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline separator-->
   <li data-datetime="2014-05-21" class="timeline-separator"></li>
   <!-- END timeline separator-->
   <!-- START timeline item-->
   <li class="timeline-inverted">
      <div class="timeline-badge success">
         <em class="fa fa-music"></em>
      </div>
      <div class="timeline-panel">
         <div class="popover right">
            <h4 class="popover-title">Relax</h4>
            <div class="arrow"></div>
            <div class="popover-content">
               <p>Listen some music</p>
            </div>
         </div>
      </div>
   </li>
   <!-- END timeline item-->
   <!-- START timeline item-->
   <li class="timeline-end">
      <a href="#" class="timeline-badge">
         <em class="fa fa-plus"></em>
      </a>
   </li>
   <!-- END timeline item-->
</ul>
<!-- END timeline-->